<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
    </div>
    <script>
        //reduce(callback(prev:上一个回调的返回值,current:当前值,index:当前值索引) 回调函数, 初始值)

        var arr1 = [4, 5, 6] // 1.题目 [4, 5, 6] =》 ['4','5','6']
        var arr2 = arr1.reduce((prev, current, index) => {
            //debugger; //打断点

            // reduce这个方法被调用时，会遍历arr这个数组的每一个元素，每遍历一个元素，就执行一次这里的代码
            // current表示当前正在遍历的这个元素
            // pre 是上一次的这个函数return的值
            // ！！！因为第一次遍历没有上一个return值，所以，交给了第二个参数，设置pre的初始值

            prev.push(current + '')
            return prev
        }, [])
        console.log(arr2); //！！！并且reduce方法最终会返回最后一次的return值
        // ！！！reduce不会改变原数组


        var arr = [{
            name: 'Vuejs入门',
            price: 99,
            count: 3
        }, {
            name: 'Vuejs底层',
            price: 89,
            count: 1
        }, {
            name: 'Vuejs从入门到放弃',
            price: 19,
            count: 5
        }, ]

        // 2.使用reduce方法 将信息拼接成字符串后放入新数组
        let newArr = arr.reduce((prev, current) => {
            prev.push(`${current.name},price:${current.price},count:${current.count}`)
            return prev
        }, [])
        console.log(newArr)

        // 3.计算总价
        let allCount = arr.reduce((prev, current) => {
            let count = prev + (current.price * current.count)
            return count
        }, 0)
        console.log('总价格:', allCount)
    </script>
</body>

</html>